<template>
    <div>
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list
                :cities="cities"
                :hot=" hotCities"
                :letter="letter"
        ></city-list>
        <city-alphabet :cities="cities" @change=handleLetterChange>

        </city-alphabet>
    </div>
</template>
<script>
    import axios from 'axios'
    import CityHeader from './../components/city/Header'
    import CitySearch from './../components/city/Search'
    import CityList from './../components/city/List'
    import CityAlphabet from './../components/city/Alphabet'
    export default{
        name:'City',
        components:{
            CityHeader,
            CitySearch,
            CityList,
            CityAlphabet
        },
        data(){
            return{
                cities:{},
                hotCities:[],
                letter:""
            }
        },
        methods:{
            getCityInfo(){
               axios.get('city.json')
                   .then(this.handleGetCityInfoSucc)
            },
            handleGetCityInfoSucc(res){
                console.log(res)
                res=res.data
                if(res.ret&& res.data){
                    const data=res.data
                    this.cities=data.cities
                    this.hotCities=data.hotCities
                }
            },
            handleLetterChange(letter){
                this.letter=letter;
                console.log(letter);
            }
        },
        mounted(){
            this.getCityInfo()
        }

    }
</script>
<style lang="stylus" scoped>

</style>